<template>
    <div>
        <headers></headers>
         <van-row>
             <van-col span="4">
              <left/>
            </van-col>
            <van-col span="20">
        <table>
            <tr v-for="(i,index) in list" :key="index.id">
                <td><van-field :label="i.label" v-model="names[index]"/></td>
                <td>
                    <select v-model="typevalues[index]">
                        <option value="input">输入框</option>
                        <option value="radio">单选框</option>
                        <option value="checkbox">多选框</option>
                        <option value="select">下拉框</option>
                        <option value="datetime">日期</option>
                        <option value="file">文件</option>
                    </select>
                </td>
                <td>
                    <van-field label="值" v-model="values[index]"/>
                    <van-button @click='getsource(index)'>选择数据源</van-button>
                </td>
            </tr>
        </table>
        <van-button @click="add">+</van-button>
        <van-button @click="submit">提交</van-button>
         <el-dialog v-model="dialogTableVisible" title="选择">
            <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange"
          >
            <el-table-column type="index" width="50" />
           
            <el-table-column property="name" label="Name" width="120" />
           
          </el-table>
         
          </el-dialog>
        </van-col>
        </van-row>
    </div>
</template>

<script>
import headers from '../comm/headers.vue'
import left from '../comm/left.vue'
import maxios from '../http/axios'
export default {
    components:{
        'headers':headers,
        'left':left,
    },
    data() {
        return {
            list:[{'label':'名称'}],
            names:{},
            typevalues:{},
            values:{},
            dialogTableVisible:false,
            gridData:[{'id':1,'name':'请假类型数据源'},{'id':2,'name':'会议地址数据源'}],
            tableData:[],
            id:this.$route.query.id
        }
    },
    methods: {
        add(){
            this.list.push({'label':'名称'})
        },
        submit(){
            //获取输入的所有值
            let tlist=[]
            for(var i=0;i<this.list.length;i++){
                let v = this.values[i]
                if(v){
                    v = JSON.parse(v)
                }
                let dict = {'lable':this.names[i],'type':this.typevalues[i],
                'values':v}
                tlist.push(dict)
            }
            maxios('getresourcedata','post',{'id':this.id,'mes':JSON.stringify(tlist)}).then(res => {
                console.log(res.list)
            })
            console.log(tlist)
        },
        // 添加数据源
        getsource(index){
            localStorage.setItem('index',index)
            maxios('getresourcedata','get').then(res => {
                this.tableData = res.list
            })
            this.dialogTableVisible = true
        },
        handleCurrentChange(val){
            this.dialogTableVisible = false
            let index = localStorage.getItem('index')
            this.values[index] = JSON.stringify(val['mes'])
        },
    },
    created() {

    }
}
</script>

<style scoped>

</style>
